<template>
  <div>
    <!--1.上半部分 -->
    <div class="type_city" v-if="cityList" @mouseleave="leavePage">
      <div class="type_city_content">
        <!-- 1.2移入显示内容的盒子 -->
        <!--currentIndex>=0的时候,  cityList[currentIndex].children里面才有值 -->
        <div class="city_info" v-if="currentIndex>=0 && cityList[0]">
          <!--  cityList[currentindex].children/items 是 children里面的5数组   -->
          <div
            class="city_info_item"
            v-for="(item,index) in cityList[currentIndex].children"
            :key="index"
            @click="update(item)"
          >
            <span class="city_info_number">{{index+1}}</span>
            <span class="city_info_city">{{item.city}}</span>
            <span class="city_info_introduce">{{item.desc}}</span>
          </div>
        </div>

        <!-- 1.1左边部分 -->
        <div class="type_city_left">
          <div
            class="menu_item"
            v-for="(item,index ) in cityList"
            :key="index"
            @mouseenter="showPage(index)"
            :class="{
              active:currentIndex==index
          }"
          >
            <!--鼠标移入的时候触发showPage函数，并将当前移入项的索引传给函数 
         此时索引index就赋值给了 变量currentIndex  为了后面在数组cityList数组中取到对应移入的对象
            -->
            <span>{{item.type}}</span>
            <i class="el-icon-arrow-right" />
          </div>
        </div>
      </div>
      <!--  -->
    </div>

    <!-- 2.下半部分 -->
    <div class="recommend_city">
      <div class="recommend_city_title">推荐城市</div>
      <div
        class="recommend_city_img"
        @click="$router.push({ path: '/post',query: { city: '广州' },})"
        style="cursor: pointer"
      >
        <img
          src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1477956387,2731834306&amp;fm=26&amp;gp=0.jpg"
          alt
        />
        <!-- http://157.122.54.189:9093/images/pic_sea.jpeg -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: [],
      currentIndex: -1,
    };
  },
  async mounted() {
    const res = await this.$axios.get("/posts/cities");
    this.cityList = res.data.data;
    console.log(this.cityList);
  },
  methods: {
    showPage(index) {
      this.currentIndex = index;
    },
    //鼠标离开触发 的函数
    leavePage() {
      this.currentIndex = -1;
    },
    update(item) {
      this.$router.push({
        path: "/post",
        //参数为 searchValue里面的值
        query: { city: item.city },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.type_city {
  width: 260px;
  height: 180px;

  margin-bottom: 24px;
  .type_city_content {
    position: relative;
    .type_city_left {
      position: absolute;
      width: 100%;
      z-index: 100;
      background: white;
      .menu_item {
        z-index: 1001;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 45px;
        padding: 0px 20px;
        font-size: 14px;
        border: 1px solid #eee;
        i {
          font-size: 16px;
        }
        &:nth-child(-n + 3) {
          border-bottom: none;
        }
        &.active {
          color: #ffa500;
          border-right-color: white;
        }
        /*  &:hover {
          cursor: default;
        } */
      }
    }

    /* 鼠标移入城市介绍 */
    .city_info {
      position: absolute;
      top: 0px;
      left: 259px;
      width: 350px;
      z-index: 10;
      background: white;
      border: 1px solid #eee;
      .city_info_item {
        padding: 10px 20px;
        font-size: 14px;
        .city_info_number,
        .city_info_city {
          font-size: 16px;
          color: #ffa500;
          margin-right: 10px;
        }
        .city_info_introduce {
          color: #666;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.recommend_city {
  width: 260px;
  .recommend_city_title {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .recommend_city_img {
    width: 260px;
    height: 174px;
    padding-top: 10px;
    img {
      max-width: 100%;
    }
  }
}
</style>